import React, { useState } from 'react';
import { Layout, Icon, Dropdown, Menu } from 'antd';
import classnames from 'classnames';
import Cookie from 'js-cookie';
import styles from './index.css';
import router from 'umi/router';
import { Link } from 'umi';
import Sider from '@/components/Grid/Sider';
const { Header, Content } = Layout;
export default function ({ children }: any) {
  const [isCollapsed, setIsCollapsed] = useState(true);
  const droplist = (<Menu>
    <Menu.Item>
      <span
        style={{ display: 'block' }}
        onClick={() => {
          Cookie.remove('token');
          Cookie.remove('user');
          router.replace('/login');
        }}>
        退出
      </span>
    </Menu.Item>
  </Menu>);
  if (!Cookie.get('user')) {
    router.replace('/login');
    return null;
  }
  return (
    <Layout className={styles.house}>
      <Header className={styles.house__header}>
        <div className={classnames(styles.siteInfo, isCollapsed ? styles['site-collapsed'] : {})}>
          <img className={styles.logo} src={require('@/assets/hapi.jpg')} />
          家幼管理平台
        </div>
        <div className={styles['house__header-rightbar']}>
          <Icon type={isCollapsed ? 'menu-unfold' : 'menu-fold'} onClick={() => setIsCollapsed(!isCollapsed)}></Icon>
          <div className={styles.house_accountInfo}>
            <Dropdown overlay={droplist} trigger={['click']}>
              <span>欢迎会员<strong style={{ margin: '0 10px' }}>{JSON.parse(Cookie.get('user')).nickname}</strong> <Icon type='down' /></span>
            </Dropdown>
          </div>
        </div>
      </Header>
      <Content className={styles.house_container}>
        <Sider className={styles.house_nav} isCollapsed={isCollapsed}></Sider>
        <Content className={isCollapsed ? styles.house_content : styles.house_content_collapsed}>{children}</Content>
      </Content>
    </Layout>
  );
}
